<template>
  <div class="role">
    <PageSearch
      :searchFormConfig="roleSearchFormConfig"
      @handleSearchClick="handleSearchClick"
      @handleResetClick="handleResetClick"
    />
    <PageContent
      :tableConfig="roleTableConfig"
      :pageName="pageName"
      ref="pageContentRef"
      @addHandleClick="addHandleClick"
      @editHandleClick="editHandleClick"
    />
    <PageModal
      :pageModalConfig="rolePageModalConfig"
      :defaultFormData="defaultFormData"
      :pageName="pageName"
      :otherInfo="otherInfo"
      ref="pageModalRef"
    >
      <el-tree
        :data="data"
        show-checkbox
        node-key="id"
        :props="{ children: 'children', label: 'name' }"
        class="menu-tree"
        @check="handleCheckChange"
        :expand-on-click-node="false"
        @node-expand="nodeExpand"
        :default-expanded-keys="defaultExpandedKeys"
        ref="elTreeRef"
      />
    </PageModal>
  </div>
</template>

<script setup lang="ts">
import PageSearch from '@/components/page-search/page-search.vue';
import PageContent from '@/components/page-content/page-content.vue';
import PageModal from '@/components/page-modal/page-modal.vue';
import { roleSearchFormConfig } from './config/searchConfig';
import { roleTableConfig } from './config/contentConfig';
import { useContentData } from '@/hooks/useContentData';
import { rolePageModalConfig } from './config/pageModalConfig';
import { usePageModal } from '@/hooks/usePageModal';
import { computed, ref, nextTick, reactive } from 'vue';
import { useStore } from '@/store';
import type { menuListType } from '@/store/types';
import { getMenuLeafKeys } from '@/utils/getMenuLeafKeys';
import { ElTree } from 'element-plus';
interface checkNodesType {
  checkedKeys: number[];
  checkedNodes: menuListType[];
  halfCheckedKeys: number[];
  halfCheckedNodes: menuListType[];
}
const store = useStore();
const pageName = 'role';
const [pageContentRef, handleSearchClick, handleResetClick] = useContentData();
// 角色权限
const otherInfo = ref({});
const handleCheckChange = (data: menuListType, checkObj: checkNodesType) => {
  const { checkedKeys, halfCheckedKeys } = checkObj;
  otherInfo.value = { menuList: checkedKeys.concat(halfCheckedKeys) };
};
// 编辑、新建
const data = computed(() => store.state.entireMenu);
const elTreeRef = ref<InstanceType<typeof ElTree>>();
const expandNodes: number[] = [];
const nodeExpand = (data: menuListType) => {
  expandNodes.push(data.id);
};
const addCallback = () => {
  pageModalRef.value.title = '新建角色';
  otherInfo.value = {};
  elTreeRef.value?.setCheckedKeys([]);
  // 所有节点收缩
  nextTick(() => {
    for (let i = 0; i < expandNodes.length; i++) {
      elTreeRef.value!.store.nodesMap[expandNodes[i]].expanded = false;
    }
  });
};
let defaultExpandedKeys: number[] = [];
const editCallback = (data: any) => {
  pageModalRef.value.title = '修改角色';
  // defaultExpandedKeys = [];
  const leafKeys = getMenuLeafKeys(data.menuList);
  nextTick(() => {
    elTreeRef.value?.setCheckedKeys(leafKeys);
    const res = elTreeRef.value?.getCheckedNodes(false, true);
    for (const item of res!) {
      if (item.children) {
        defaultExpandedKeys.push(item.id);
      }
    }
    console.log(defaultExpandedKeys);
  });
};
const [defaultFormData, pageModalRef, addHandleClick, editHandleClick] =
  usePageModal(addCallback, editCallback);
</script>

<style scoped lang="less">
.menu-tree {
  padding: 0px 30px;
}
</style>
